<template>
  <a-modal
    :title="'工艺单打印'"
    :visible="true"
    :width="mainWidth"
    :footer="null"
    id="printMain"
    @cancel="reset"
  >
    <a-button
      type="primary"
      style="position: absolute;right: 25px;"
      v-print="'#print'"
    >打印</a-button>
    <a-tabs
      default-active-key="1"
      @change="callback"
      v-model="tabMenu"
    >
      <a-tab-pane
        key="1"
        tab="新款扩色工艺单"
      >
      </a-tab-pane>
      <a-tab-pane
        key="2"
        tab="大货工艺材料单"
        force-render
      >
      </a-tab-pane>
       <a-tab-pane
        key="3"
        tab="特殊工艺确认单"
        force-render
      >
      </a-tab-pane>
       <a-tab-pane
        key="4"
        tab="工艺材料单"
        force-render
      >
      </a-tab-pane>
    </a-tabs>
    <div
      style="display:flex;flex-direction:row"
      id="print"
    >
      <div
        class="main"
        :style="{ width: tabMenu == 2 ?'50%':'100%'}"
        v-if="tabMenu == 1 || tabMenu == 2"
      >

        <div id="firstDe">
          <a-descriptions
            style="text-align:center;"
            :title="title"
            bordered
          >
            <a-descriptions-item label="样衣号">
              {{list.sampleCode}}
            </a-descriptions-item>
            <a-descriptions-item label="款号">

            </a-descriptions-item>
            <a-descriptions-item label="品名">
              {{list.sampleName}}
            </a-descriptions-item>

          </a-descriptions>
        </div>
        <div
          style="height: 300px;width: 100%;border: 1px solid #e8e8e8;display: flex;padding:10px;border-bottom: 0;"
          :style="{ justifyContent: !list.detailImg ?'center':'space-between'}"
        >
          <img
            :src="list.styleImg"
            :style="{ width: !list.detailImg ?'100%':'50%',objectFit: 'contain'}"
            :alt="list.styleImg"
          >
          <img
            :src="list.detailImg"
            v-if="list.detailImg"
            :style="{ width: !list.detailImg ?'100%':'50%',objectFit: 'contain'}"
            :alt="list.detailImg"
          >
        </div>
        <a-descriptions
          bordered
          :column="1"
          class="labelStr"
        >
          <a-descriptions-item
            label="统一工艺"
            v-if="craftBillTemplateVos.length"
          >
            <div style="display:flex;flex-direction:column">
              <span
                v-for="item,i in craftBillTemplateVos"
                :key="i"
              >
                {{i+1}}:{{item.partName}}{{item.description}}
              </span>
            </div>
            <div style="position: relative;top: 13px;padding: 4px 20px 0;border-top: 1px solid #e8e8e8;margin: 0 -24px;">
              <a-row>
                <a-col :span="6">
                  ✔不可拆线
                </a-col>
                <a-col :span="6">
                  ✔点位
                </a-col>
                <a-col :span="6">
                  ✔不可锥位
                </a-col>
                <a-col :span="6">
                  ✔不用色粉
                </a-col>
              </a-row>

            </div>
          </a-descriptions-item>
          <a-descriptions-item
            label="隐形工艺"
            v-if="partList1.length && tabMenu == 1"
          >
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div
                  v-for="item,i in partList1"
                  :key="i"
                  :style="{ display: 'flex', justifyContent: partList1.length<=1 ?'center':'space-between',width:partList1.length<=1 ?'100%':`${98/partList1.length}%`}"
                >
                  <div style="margin:auto">
                    <img
                      :src="item.imgurl"
                      :style="{ width: partList1.length<=1 ?'300px':'250px',height: partList1.length<=1 ?'200px':'150px',objectFit: 'contain'}"
                      :alt="item.imgurl"
                    >
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column;margin-top:5px">
                <span
                  v-for="item,i in partList1"
                  :key="i"
                >
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>
          </a-descriptions-item>
          <a-descriptions-item
            label="拼缝"
            v-if="partList2.length && tabMenu == 1"
          >
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div
                  v-for="item,i in partList2"
                  :key="i"
                  :style="{ display: 'flex', justifyContent: partList2.length<=1 ?'center':'space-between',width:partList2.length<=1 ?'100%':`${98/partList2.length}%`}"
                >
                  <div style="margin:auto">
                    <img
                      :src="item.imgurl"
                      :style="{ width: partList2.length<=1 ?'300px':'250px',height: partList2.length<=1 ?'200px':'150px',objectFit: 'contain'}"
                      :alt="item.imgurl"
                    >
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column">
                <span
                  v-for="item,i in partList2"
                  :key="i"
                >
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>

          </a-descriptions-item>
          <a-descriptions-item
            label="后道工序"
            v-if="list.beof"
          >
            <div style="white-space: pre-line;margin-top:-20px;">
              {{list.beof}}
            </div>
          </a-descriptions-item>
          <a-descriptions-item
            label="主唛"
            v-if="partList3.length"
          >
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div
                  v-for="item,i in partList3"
                  :key="i"
                  :style="{ display: 'flex', justifyContent: partList3.length<=1 ?'center':'space-between',width:partList3.length<=1 ?'100%':`${98/partList3.length}%`}"
                >
                  <div style="margin:auto">
                    <img
                      :src="item.imgurl"
                      :style="{ width: partList3.length<=1 ?'300px':'250px',height: partList3.length<=1 ?'200px':'150px',objectFit: 'contain'}"
                      :alt="item.imgurl"
                    >
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column">
                <span
                  v-for="item,i in partList3"
                  :key="i"
                >
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>

          </a-descriptions-item>
          <a-descriptions-item
            label="检验要点"
            v-if="list.beof"
          >
            <div style="white-space: pre-line;margin-top:-20px;">
              {{list.beof}}
            </div>
          </a-descriptions-item>
          <a-descriptions-item
            label="吊牌包装"
            v-if="partList3.length"
          >
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div
                  v-for="item,i in partList3"
                  :key="i"
                  :style="{ display: 'flex', justifyContent: partList3.length<=1 ?'center':'space-between',width:partList3.length<=1 ?'100%':`${98/partList3.length}%`}"
                >
                  <div style="margin:auto">
                    <img
                      :src="item.imgurl"
                      :style="{ width: partList3.length<=1 ?'300px':'250px',height: partList3.length<=1 ?'200px':'150px',objectFit: 'contain'}"
                      :alt="item.imgurl"
                    >
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column">
                <span
                  v-for="item,i in partList3"
                  :key="i"
                >
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>

          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions
          bordered
          :column="4"
        >
          <a-descriptions-item label="工艺师">
            {{list.statusUser}}
          </a-descriptions-item>
          <a-descriptions-item label="制版师">
            {{list.bs}}
          </a-descriptions-item>
          <a-descriptions-item label="放码师">
            {{list.fmshor}}
          </a-descriptions-item>
          <a-descriptions-item label="时间">
            {{list.statusTime}}
          </a-descriptions-item>
        </a-descriptions>

      </div>
      <div
        v-if="tabMenu == 2"
        style="width:50%"
      >

        <a-descriptions
          bordered
          :column="2"
          style="text-align:center;"
          title="工艺编写"
          class="labelStr"
        >
          <a-descriptions-item
            label="隐形工艺"
            :span="3"
            v-if="partList1.length && tabMenu == 2"
          >
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div
                  v-for="item,i in partList1"
                  :key="i"
                  :style="{ display: 'flex', justifyContent: partList1.length<=1 ?'center':'space-between',width:partList1.length<=1 ?'100%':`${98/partList1.length}%`}"
                >
                  <div style="margin:auto">
                    <img
                      :src="item.imgurl"
                      :style="{ width: partList1.length<=1 ?'300px':'250px',height: partList1.length<=1 ?'200px':'150px',objectFit: 'contain'}"
                      :alt="item.imgurl"
                    >
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column;margin-top:5px">
                <span
                  v-for="item,i in partList1"
                  :key="i"
                >
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>
          </a-descriptions-item>
          <a-descriptions-item
            label="拼缝"
            :span="3"
            v-if="partList2.length"
          >
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div
                  v-for="item,i in partList2"
                  :key="i"
                  :style="{ display: 'flex', justifyContent: partList2.length<=1 ?'center':'space-between',width:partList2.length<=1 ?'100%':`${98/partList2.length}%`}"
                >
                  <div style="margin:auto">
                    <img
                      :src="item.imgurl"
                      :style="{ width: partList2.length<=1 ?'200px':'150px',height: partList2.length<=1 ?'150px':'100px',objectFit: 'contain'}"
                      :alt="item.imgurl"
                    >
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column">
                <span
                  v-for="item,i in partList2"
                  :key="i"
                  style="text-align:left"
                >
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>

          </a-descriptions-item>
       

        </a-descriptions>
           <div style="display:flex;flex-wrap:wrap;width:100%;border: 1px solid #e8e8e8;border-left: none;">
            <div
              v-for="item,i in allPart"
              :key="i"
              style="display:flex;"
              
            >
              <div class="box">
                {{item.name}}
              </div>
              <div style="display:flex;flex-direction:column;padding: 0 10px;border-bottom: 1px solid rgb(232, 232, 232);">
                <div style="display:flex;">
                  <img
                    v-for="subitem,i in item.list"
                    :key="i"
                    :src="subitem.imgurl"
                    :style="{ width: '156px',height:'150px',objectFit: 'contain'}"
                    :alt="subitem.imgurl"
                  >
                </div>
                <div style="text-align:left;display:flex;flex-direction:column">
                  <span
                    v-for="subitem,i in item.list"
                    :key="i"
                  > {{i+1}}：{{subitem.description}}</span>
                </div>
              </div>
            </div>
          </div>
      </div>
       <div
        v-if="tabMenu == 3"
        style="width:100%"
      >
        <div id="firstDe">
          <a-descriptions
            style="text-align:center;"
            title="特殊工艺确认单"
            bordered
          >
            <a-descriptions-item label="款号">
              
            </a-descriptions-item>
            <a-descriptions-item label="样衣号">
              {{list.sampleCode}}
            </a-descriptions-item>
            <a-descriptions-item label="季度">
              {{list.scseason}}
            </a-descriptions-item>
              <a-descriptions-item label="品名">
              {{list.sampleName}}
            </a-descriptions-item>
            <a-descriptions-item label="品类">

            </a-descriptions-item>
            <a-descriptions-item label="色量">
             
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <a-descriptions
          bordered
          :column="1"
          class="labelStr"
        >
          <a-descriptions-item
            label="特殊工艺"
            v-if="craftBillTemplateVos.length"
          >
            <div style="white-space: pre-line;margin-top:-20px;">
              {{list.tyProcess}}
            </div>
          </a-descriptions-item>
          <a-descriptions-item
            label="排料/剪裁要求"
          >
          <div style="white-space: pre-line;margin-top:-20px;">
             {{list.tyReq}}
            </div>
          </a-descriptions-item>

         
        </a-descriptions>
         <div style="border: 1px solid rgb(232, 232, 232);">
            <a-row class="specTitle">
              特艺名称
            </a-row>
             <a-row>
              <a-col :span='8' v-for="item,i in specList" :key="i">
                <div style="display:flex;flex-direction:column;border: 1px solid rgb(232, 232, 232);">
                    <span class="color">色号:{{item.styColorId}}</span>
                  <img :src="item.imgurl" :alt="item.imgurl" style="width:200px;margin: auto;height: 250px;object-fit: scale-down;margin-top:10px">
                  <span class="color">跳码:{{item.jumpSize}}</span>
                </div>
              </a-col>
            </a-row>
             <a-row class="comfirm">
               确认意见:
            </a-row>
          </div>
      </div>
       <div
        v-if="tabMenu == 4"
        style="width:100%"
      >
        <div id="firstDe">
          <a-descriptions
           :column="4"
            style="text-align:center;"
            title="工艺材料单"
            bordered
          >
            <a-descriptions-item label="款号">
              
            </a-descriptions-item>
            <a-descriptions-item label="样衣号">
              {{list.sampleCode}}
            </a-descriptions-item>
            <a-descriptions-item label="安全技术类别">
              {{list.scseason}}
            </a-descriptions-item>
              <a-descriptions-item label="执行标准">
              {{list.sampleName}}
            </a-descriptions-item>
            <a-descriptions-item label="品名" span="2">

            </a-descriptions-item>
           <a-descriptions-item label="安全技术类别1">
              {{list.scseason}}
            </a-descriptions-item>
              <a-descriptions-item label="执行标准1">
              {{list.sampleName}}
              </a-descriptions-item>
               <a-descriptions-item label="洗水图标" span="3">

            </a-descriptions-item>
           <a-descriptions-item label="维护方法">
              {{list.scseason}}
            </a-descriptions-item>
          </a-descriptions>
          <div id="changecol"> 
            <a-row style="border: 1px solid #e8e8e8;">
              <a-col :span="2" class="paper">
                纸样
              </a-col>
               <a-col :span="22">
                <a-row>
                  <a-col :span="5" class="contentH">
                    母版
                  </a-col>
                  <a-col :span="5" class="contentH">
                    纸样1
                  </a-col>
                  <a-col :span="5" class="contentH">
                   纸样2
                  </a-col>
                  <a-col :span="5" class="contentH">
                   纸样3
                  </a-col>
                  <a-col :span="5" class="contentH">
                    纸样4
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="5" v-for="count in 5" :key="count">
                    <a-row>
                      <a-col :span="8">
                        <a-row class="contentH">
                          经
                        </a-row>
                        <a-row class="contentH"> 
                          纬
                        </a-row>
                      </a-col>
                      <a-col :span="16" class="contentH">
                        
                      </a-col>
                    </a-row>
                  </a-col>
                  
                </a-row>
              </a-col>
            </a-row>
          </div>
          <a-descriptions
           :column="3"
            style="text-align:center;"
            bordered
            class="labelStr2"
          >
            <a-descriptions-item label="面料名称" span="2">
              
            </a-descriptions-item>
            <a-descriptions-item label="面料正反面说明">
              
            </a-descriptions-item>
            <a-descriptions-item label="纸样数量" span="3">
              
            </a-descriptions-item>
            <a-descriptions-item label="裁床注意事项" span="3">
              
            </a-descriptions-item>
              
            <a-descriptions-item label="工序流程" span="3">
              
            </a-descriptions-item>
             <a-descriptions-item label="粘衬部位" span="2">
              
            </a-descriptions-item>
            <a-descriptions-item label="温度压力">
              
            </a-descriptions-item>
             <a-descriptions-item label="童装/婴童/蓬马工艺师手填跳码" span="3">
              
            </a-descriptions-item>
          </a-descriptions>
          <div> 
            <a-row style="border: 1px solid #e8e8e8;">
              <a-col :span="7">
                 <a-row class="lastTitle">
                  单位:cm
                </a-row>
                  <a-row>
                  <a-col :span="4" class="contentH">
                    序号
                  </a-col>
                  <a-col :span="8" class="contentH">
                    号型/部位
                  </a-col>
                  <a-col :span="12" class="contentH">
                   成衣测量说明
                  </a-col>
                </a-row>
                <a-row>
                    <a-row v-for="count in 20" :key="count">
                     <a-col :span="4" class="contentH">
                    {{count}}
                  </a-col>
                  <a-col :span="8" class="contentH">
                   
                  </a-col>
                  <a-col :span="12" class="contentH">
                   
                  </a-col>
                    </a-row>
                  
                  
                </a-row>
              </a-col>
               <a-col :span="7">
              <a-row class="lastTitle">
                  纸样尺寸
                </a-row>
                
                <a-row>
           
                    <a-row v-for="count in 21" :key="count">
                     <a-col :span="4" class="contentH" v-for="count in 6" :key="count">
                     </a-col>
                    </a-row>
           
                </a-row>
              </a-col>
              <a-col :span="7">
                <a-row class="lastTitle">
                  成衣尺寸
                </a-row>
                
                <a-row>
        
                    <a-row  v-for="count in 21" :key="count">
                     <a-col :span="4" class="contentH" v-for="count in 6" :key="count">
                     </a-col>
                    </a-row>
                
                </a-row>
              </a-col>
              <a-col :span="3">
                <a-row class="lastTitle">
                  偏差
                </a-row>
                <a-row  v-for="count in 21" :key="count" class="contentH">

                </a-row>
              </a-col>
            </a-row>
          </div>
        </div>
        
      </div>
    </div>
  </a-modal>

</template>
// <script>
// document.addEventListener('DOMContentLoaded', function (event) {
//   let table = document.getElementById('content'),
//     htm = '页面内容……将tbody>td作为页面内容区，按需填放内容'
//   for (let i = 0; i < 100; i++) {
//     htm += '<div>页面内容' + (i + 1) + '</div>'
//   }
//   table.innerHTML = htm
// })
//
</script>
<script>
import { getDetailList } from '@api/rd/index'

export default {
  components: {},

  props: {
    id: {
      type: [Number, String],
      default: ''
    }
  },

  data() {
    return {
      list: {},
      partList1: [],
      partList2: [],
      mainWidth: '60%',
      partList3: [],
      title: '新款扩色工艺单',
      tabMenu: '1',
      craftBillTemplateVos: [],
      allPart: [],
      specList:[],
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    const { id } = this.$props
    if (id) {
      this.getDetail()
    }
  },
  methods: {
    callback(key) {
      if (key == 1) {
        this.title = '新款扩色工艺单'
      } else if (key == 2) {
        this.title = '大货工艺材料单'
        this.mainWidth = '1684px'
      }
      else if (key == 3) {
        this.mainWidth = '60%'
      }
      else if (key == 4) {
        this.mainWidth = '1210px'
      }
      this.tabMenu = key
    },
    reset() {
      this.$emit('closePrint')
    },
    async getDetail() {
      const params = {
        id: this.id
      }
      try {
        const res = await getDetailList('bill', params)
        if (res.code == 200) {
          this.list = res.data
          this.craftBillTemplateVos = res.data.craftBillTemplateVos
          this.list.craftBillPartVos.map(item => {
            if (item.partName == '隐形工艺') {
              this.partList1.push(item)
            }
            if (item.partName == '拼缝') {
              this.partList2.push(item)
            }
            if (!item.partName.indexOf('主唛')) {
              this.partList3.push(item)
            }
          })
          const newArr = []
          this.list.craftBillPartVos.map(x => {
            x.name = x.partName
            let index = newArr.findIndex(y => y.name == x.name)
            if (index == -1) {
              newArr.push({
                name: x.name,
                list: [
                  {
                    imgurl: x.imgurl,
                    description: x.description
                  }
                ]
              })
            } else {
              newArr[index].list.push({
                imgurl: x.imgurl,
                description: x.description
              })
            }
          })
          this.allPart = newArr
          this.specList = res.data.craftBillSpecVos
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单详情失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单详情失败！')
      }
    }
  }
}
</script>

<style scoped>
#photo .ant-descriptions-bordered .ant-descriptions-item-label {
  background-color: #fff;
}
.labelStr .ant-descriptions-item-label {
  width: 40px;
  writing-mode: tb;
  letter-spacing: 10px;
  text-align: center;
}
.labelStr2 .ant-descriptions-item-label {
     width: 180px;
}
/* @media print {
  html {
    zoom: 70%;
  }
} */
#print .ant-descriptions-bordered .ant-descriptions-item-label {
  font-weight: 500;
  font-size: 18px;
}
#print .ant-descriptions-title {
  font-size: 24px;
}
#firstDe .ant-descriptions-item-content {
  font-size: 18px !important;
}
#print .ant-descriptions-item-content {
  font-size: 16px;
}
.box{
    width: 76px;
    background: #fafafa;
    font-weight: 500;
    font-size: 18px;
    writing-mode: tb;
    padding: 16px 24px;
    letter-spacing: 10px;
    text-align: center;
    border: 1px solid #e8e8e8;
     border-top: none;
}
.specTitle{
      height: 61px;
    background: #fafafa;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
}
.color{
      height: 30px;
    font-size: 21px;
    margin-top: 10px;
    text-align: center;
}
.comfirm{
      height: 100px;
    padding: 20px;
    line-height: 60px;
    font-size: 18px;
    font-weight: 500;
}
.contentH{
      border: 1px solid #e8e8e8;
    height: 40px;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    font-weight: 500;
}
.lastTitle{
      font-size: 18px;
    font-weight: 500;
    background: #fafafa;
    line-height: 60px;
    height: 60px;
        border: 1px solid #e8e8e8;
    text-align: center;
}
.paper{
      font-size: 18px;
    font-weight: 500;
    background: #fafafa;
    line-height: 97px;
    height: 120px;
    text-align: center;
  writing-mode: tb;

    letter-spacing: 10px;
}
</style>
<style>
#changecol .ant-col-5 {
  width: 20%;
}
</style>